<template>
  <a-card :bordered="false">
    <!--表头条件搜索  -->
    <a-form-model layout="inline" :model="serverform">
      <a-form-model-item
        ><a-input placeholder="设备hostname" style="width: 150px" v-model="serverform.hostname"></a-input
      ></a-form-model-item>
      <a-form-model-item>
        <a-select placeholder="设备IP" v-model="serverform.serverIp" style="width: 150px">
          <a-select-option v-for="ip in ipList" :key="ip">{{ ip }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item>
        <a-select placeholder="环境" v-model="serverform.env" style="width: 150px">
          <a-select-option v-for="env in envList" :key="env">{{ env }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{ span: 12, offset: 5 }"
        ><a-button type="primary" icon="search" @click="handleSubmit">搜索</a-button></a-form-model-item
      >
      <a-form-model-item :wrapper-col="{ span: 12, offset: 5 }"
        ><a-button type="primary" icon="sync" @click="resetForm">重置</a-button></a-form-model-item
      >
    </a-form-model>
    <br />
    <!-- 主体表格内容 -->
    <div style="margin-bottom: 16px">
      <a-button type="primary" icon="plus" @click="showModal">新增</a-button>&nbsp;&nbsp;
      <a-popconfirm title="确定要删除以下服务器吗？" @confirm="delServer">
        <a-icon slot="icon" type="question-circle-o" style="color: red" />
        <a-button type="danger" :disabled="!hasSelected" icon="delete">删除</a-button>
      </a-popconfirm>
    </div>
    <a-table
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      :columns="columns"
      :data-source="data"
      :pagination="false"
    >
      <a slot="action" slot-scope="text">
        <!-- 展示服务修改按钮 -->
        <a-button type="primary" shape="circle" icon="edit" @click="editServer(text)" />
      </a>
    </a-table>
    <br />
    <!-- 分页组件 -->
    <a-pagination v-model="currentpage" :total="total" :pageSize="pageSize" @change="pageChange" />
    <!-- 服务器新增Modal -->
    <a-modal v-model="serverModalvisible" title="新增服务器" width="1000px" @ok="createServer">
      <a-form-model
        :model="createserverform"
        :rules="serverrules"
        ref="ruleForm"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
      >
        <a-row>
          <a-col :span="8">
            <a-form-model-item label="设备hostname" prop="hostname">
              <a-input placeholder="请输入设备hostname" style="width: 180px" v-model="createserverform.hostname" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="设备IP" prop="serverIp">
              <a-input placeholder="请输入设备IP" style="width: 180px" v-model="createserverform.serverIp" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="环境" prop="env" v-has="'env'">
              <a-input placeholder="请输入环境" style="width: 180px" v-model="createserverform.env" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>
    <!-- 服务器编辑Modal -->
    <a-modal v-model="editModal" title="服务器详情" width="800px" @ok="submitedit">
      <a-form-model layout="inline" :model="editform" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="设备hostname">
              <a-input v-model="editform.hostname" style="width: 240px"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item >
              <a-input v-model="editform.serverId" type="hidden" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="设备IP">
              <a-input v-model="editform.serverIp" style="width: 180px"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="设备环境">
              <a-input v-model="editform.env" style="width: 180px"/>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="创建人">
              <a-input v-model="editform.createBy" disabled style="width: 180px"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="创建时间">
              <a-date-picker format="YYYY-MM-DD" v-model="editform.createTime" disabled style="width: 180px"/>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="修改人">
              <a-input v-model="editform.modifyBy" disabled style="width: 180px"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="最后修改时间">
              <a-date-picker format="YYYY-MM-DD" v-model="editform.modifyTime" disabled style="width: 180px"/>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>
  </a-card>
</template>

<script>
import { getStore } from '@/utils/storage'
import { createServer, getIpList, getEnvList, getServer, delServer,getServerDetail,editServer} from '@/api/server/server'

export default {
  data() {
    return {
      editform: {},
      editModal: false,
      serverrules: {
        hostname: [{ required: true, message: '设备hostname不能为空', trigger: 'blur' }],
        serverIp: [{ required: true, message: '服务ip不能为空', trigger: 'blur' }],
        env: [{ required: true, message: '环境不能为空', trigger: 'blur' }],
      },
      createserverform: {
        hostname: '',
        serverIp: '',
        env: '',
      },
      serverModalvisible: false,
      currentpage: 1,
      total: 0,
      pageSize: 8,
      serverform: {},
      ipList: [],
      envList: [],
      data: [],
      columns: [
        { title: '设备hostname', dataIndex: 'hostname', key: 'hostname' },
        { title: '设备IP', dataIndex: 'serverIp', key: 'serverIp' },
        { title: '环境', dataIndex: 'env', key: 'env' },
        { title: '创建人', dataIndex: 'createBy', key: 'createBy' },
        { title: '最后修改时间', dataIndex: 'modifyTime', key: 'modifyTime' },
        { title: '操作', key: 'operation', fixed: 'right', width: 250, scopedSlots: { customRender: 'action' } },
      ],
      selectedRowKeys: [],
      selectedServerId: [],
    }
  },

  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0
    },
  },

  created() {
    this.getServer()
    this.getIpList()
    this.getEnvList()
  },

  methods: {
    submitedit(){
      editServer(this.editform,getStore('pro__Login_Userinfo').value.id).then(res=>{
        if(res.code==200){
          this.getServer()
          this.$message.success('修改成功');
          this.selectedRowKeys = [],
          this.editModal=false;
        }else{
          this.$message.error(res.message)
        }
      })
    },

    pageChange() {
      this.selectedRowKeys = []
      getServer(this.serverform, this.currentpage, this.pageSize).then((res) => {
        this.data = res.result.server
        this.total = res.result.total
      })
    },

    editServer(text) {
      this.editModal = true
      getServerDetail(text.serverId).then(res=>{
        this.editform=res.result;
      })
    },

    onSelectChange(selectedRowKeys) {
      //console.log("text",selectedRowKeys);
      var selectServerId = []
      for (var i = 0; i < selectedRowKeys.length; i++) {
        selectServerId.push(this.data[selectedRowKeys[i]].serverId)
      }
      this.selectedServerId = selectServerId
      this.selectedRowKeys = selectedRowKeys
    },

    delServer() {
      console.log('select:', this.selectedServerId)
      delServer(this.selectedServerId).then((res) => {
        if (res.code == 200) {
          this.getServer()
          this.$message.success('服务器删除成功')
          this.selectedRowKeys = []
        } else {
          this.$message.error(res.message)
        }
      })
    },

    handleSubmit() {
      this.selectedRowKeys = []
      getServer(this.serverform, 1, this.pageSize).then((res) => {
        this.data = res.result.server
        this.total = res.result.total
      })
    },

    showModal() {
      this.serverModalvisible = true
    },

    resetForm() {
      this.selectedRowKeys = []
      ;(this.serverform = {}),
        getServer(this.serverform, 1, this.pageSize).then((res) => {
          this.data = res.result.server
          this.total = res.result.total
        })
    },

    createServer() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          createServer(this.createserverform, getStore('pro__Login_Userinfo').value.id).then((res) => {
            if (res.code == 200) {
              this.getServer()
              this.$message.success('新增服务器成功')
              this.serverModalvisible = false
              this.createserverform = { hostname: '', serverIp: '', env: '' }
            } else {
              this.$message.error(res.message)
            }
          })
        } else {
          return false
        }
      })
    },

    getServer() {
      //console.log('createForm:',this.createserverform);
      getServer(this.serverform, this.currentpage, this.pageSize).then((res) => {
        this.data = res.result.server
        this.total = res.result.total
      })
    },

    getIpList() {
      getIpList().then((res) => {
        this.ipList = res.result
      })
    },

    getEnvList() {
      getEnvList().then((res) => {
        this.envList = res.result
      })
    },

  },
}
</script>

